<template>
  <div>
    <el-row style="width: 98%; padding: 15px 0 15px 0; margin: 0 auto">
      <el-col :span="24">
        <div style="float: left">
          <el-button type="primary" @click="handleShowApplyList" round>
            申请列表
          </el-button>
        </div>
        <div style="float: left; margin-left: 20px">
          <el-button
            icon="el-icon-plus"
            type="success"
            @click="handleAddApplyInfoDialog"
          >
            申请虚拟机
          </el-button>
        </div>
        <div style="float: left; margin-left: 20px">
          <el-button
            icon="el-icon-plus"
            type="success"
            @click="handleApplyFreeEntity"
          >
            申请实体机
          </el-button>
        </div>
      </el-col>
    </el-row>

    <!-- 这里是主体表格 -->

    <el-row v-if="showApplyList">
      <el-table
        ref="applyInfoList"
        :data="
          applyInfoList == null
            ? []
            : applyInfoList.slice(
                (pageData.currentPage - 1) * pageData.pageSize,
                pageData.currentPage * pageData.pageSize
              )
        "
        border
        @row-click="handleExpandRow"
        :header-cell-style="getHeadClass"
        :row-class-name="getRowClassName"
        empty-text="当前没有数据，请添加数据"
        style="width: 98%; margin: 0 auto"
      >
        <el-table-column
          label="资源id"
          prop="applyResourceId"
          align="center"
          :formatter="showNull"
          sortable
          width="90"
        ></el-table-column>
        <el-table-column
          label="资源类别"
          prop="resourceTypeName"
          align="center"
          width="120"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="申请原因"
          prop="applyReason"
          align="center"
          width="180"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="管理员备注"
          prop="adminRemark"
          align="center"
          width="180"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="流程信息"
          prop="processInfo"
          align="center"
          width="180"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.processInstanceId"
              :src="processImageURL + scope.row.processInstanceId"
              :preview-src-list="[
                processImageURL + scope.row.processInstanceId,
              ]"
              style="width: 180; height: 30px"
              title="点击查看当前流程"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="申请状态"
          prop="applyStatus"
          align="center"
          width="120"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="开始使用时间"
          prop="applyStartUseTime"
          align="center"
          width="180"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="结束使用时间"
          prop="applyEndUseTime"
          align="center"
          width="180"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column show-overflow-tooltip align="center" label="操作">
          <template slot-scope="scope">
            <div
              :hidden="
                !(
                  scope.row.applyStatus === applyStatus.waitSubmit ||
                  scope.row.applyStatus === applyStatus.auditFail
                )
              "
            >
              <el-button
                type="text"
                @click="handleSubmitApply(scope.$index, scope.row)"
              >
                提交申请
              </el-button>
              <el-button
                type="text"
                @click="handleEditInfoDialog(scope.$index, scope.row)"
              >
                修改信息
              </el-button>
              &emsp;&emsp;
              <template>
                <el-popconfirm
                  @onConfirm="handleDeleteApply(scope.$index, scope.row)"
                  title="确认删除该申请么？"
                >
                  <el-button slot="reference" type="text">删除</el-button>
                </el-popconfirm>
              </template>
            </div>
            <el-button
              :hidden="
                !(scope.row.applyStatus === applyStatus.auditing) &&
                !(scope.row.applyStatus === applyStatus.assigning)
              "
              type="text"
              @click="handleCancelApply(scope.$index, scope.row)"
            >
              撤销申请
            </el-button>
            <div :hidden="!(scope.row.applyStatus === applyStatus.using)">
              <template>
                <el-popconfirm
                  @onConfirm="handleReturnResource(scope.$index, scope.row)"
                  title="归还操作无法回退，确认归还资源么？"
                >
                  <el-button slot="reference" type="text">归还资源</el-button>
                </el-popconfirm>
              </template>
            </div>
            <div :hidden="!(scope.row.applyStatus === applyStatus.free)">
              <template>
                <el-popconfirm
                  @onConfirm="handleDeleteApply(scope.$index, scope.row)"
                  title="确认删除该申请么？"
                >
                  <el-button slot="reference" type="text">删除</el-button>
                </el-popconfirm>
              </template>
            </div>
          </template>
        </el-table-column>
        <!-- 子表格 -->
        <el-table-column type="expand" align="center">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <h2>申请资源信息：</h2>
              <el-form-item
                v-for="field in props.row.entityFieldInfo"
                :key="field.resourceTypeFieldName"
                :label="field.resourceTypeFieldTitle"
              >
                <span
                  v-if="
                    field.resourceTypeFieldUnit == '' ||
                    field.resourceTypeFieldUnit == null
                  "
                >
                  {{ props.row.items[field.resourceTypeFieldName] }}
                </span>
                <span v-else>
                  {{ props.row.items[field.resourceTypeFieldName] }}({{
                    field.resourceTypeFieldUnit
                  }})
                </span>
                ;
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        hide-on-single-page
        background
        :current-page="pageData.currentPage"
        :layout="layout"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageData.pageSize"
        :total="pageData.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-row>

    <ApplyFreeEntityTableComponent
      v-if="!showApplyList"
    ></ApplyFreeEntityTableComponent>

    <ApplyInfoFormComponent
      @closed-dialog="closedDialog"
      :rowData="applyInfo"
      :addOrUpdate="addOrUpdate"
      v-if="addApplyDialogVisible"
    ></ApplyInfoFormComponent>
  </div>
</template>

<style>
  html body .el-table .error-row {
    background: rgb(216, 205, 214);
  }

  html body .el-table .warning-row {
    background: #ffffe0;
  }

  html body .el-table .success-row {
    background: #f5deb3;
  }
</style>

<script src="./myApply.js"></script>
